import { useState } from 'react'
import TabszaiTu from '../../../components/HuiDanTabs/index'
import { SearchOutlined } from '@ant-design/icons';
import { Input, Table, Divider, Select, Space, DatePicker } from 'antd';
import type { TableColumnsType, TableProps, DatePickerProps, GetProps } from 'antd';
import { RowSelectionType } from 'antd/es/table/interface';

export default function Index() {

  // 定义数据类型接口
  interface DataType {
    key: React.Key;
    order: string;
    time: string;
    pianhao: string;
    state: string;
    party: string;
    name: string;
    Place: string;
    PlaceOf: string;
    actualTime: string;
    title: string;
    kg: string;
  }

  // 定义表格列
  const columns: TableColumnsType<DataType> = [
    {
      title: '订单号',
      width: 120,
      dataIndex: 'order',
      key: 'order',
      fixed: 'left',
    },
    {
      title: '下单时间',
      width: 150,
      dataIndex: 'time',
      key: 'time',
      fixed: 'left',
    },
    {
      title: '合同编号',
      width: 150,
      dataIndex: 'pianhao',
      key: 'pianhao',
    },
    { title: '确认状态', dataIndex: 'state', key: 'state' },
    { title: '收货方', width: 120, dataIndex: 'party', key: 'party' },
    { title: '收货人', width: 120, dataIndex: 'name', key: 'name' },

    { title: '始发地', dataIndex: 'Place', key: 'Place' },
    { title: '目的地', dataIndex: 'PlaceOf', key: 'PlaceOf' },
    { title: '货物名称', dataIndex: 'title', key: 'title' },
    { title: '重量kg', dataIndex: 'kg', key: 'kg' },
    { title: '回单时间', dataIndex: 'actualTime', key: 'actualTime' },

  ];

  // 定义数据源
  const dataSource: DataType[] = [
    {
      key: '1',
      order: 'XL0001',
      time: '2023-07-01 14:30',
      pianhao: 'HCF2024400091',
      state: '未确认',
      party: '上海分公司',
      name: "张三",
      Place: '上海仓库',
      PlaceOf: '北京分拨中心',
      title: "白糖",
      kg: "50",

      actualTime: '2023-07-02 10:10',
    },
    {
      key: '2',
      order: 'XL0002',
      time: '2023-07-02 09:15',
      pianhao: 'HCF2024400091',
      state: '已确认',
      party: '杭州供应商',
      name: "张三",
      Place: '杭州工厂',
      PlaceOf: '广州配送中心',
      title: "白糖",
      kg: "50",
      actualTime: '2023-07-02 10:10',

    },
  ];

  // 定义行选择
  const rowSelection: TableProps<DataType>['rowSelection'] = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };

  // 定义组件
  const App: React.FC = () => {
    const [selectionType] = useState<RowSelectionType>('radio');
    return (

      <div>

        <Divider />
        <Table<DataType>
          rowSelection={{ type: selectionType, ...rowSelection }}
          pagination={
            {
              defaultPageSize: 3,
              pageSizeOptions: [2, 3, 5, 10],
              total: dataSource.length,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条`,
            }
          }
          columns={columns}
          dataSource={dataSource}
          scroll={{ x: 'max-content' }}

        />
      </div>
    );
  };
  const { RangePicker } = DatePicker;
  type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
  const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    console.log('onOk: ', value);
  };
  return (
    <div>
      <TabszaiTu />

      <div style={{ marginLeft: '10px', marginTop: '10px' }}>
        <Space size={8} wrap>
          <Select
            defaultValue="合同编号"
            style={{ width: 200 }}
            options={[
              { value: '1', label: '收货方' },
              { value: '2', label: '始发地' },
              { value: '3', label: '目的地' },
              { value: '4', label: '订单号' },
              { value: '5', label: '运单号' },
              { value: '6', label: '货名' },
              { value: '7', label: '合同编号' },
            ]}
          />
          <Input placeholder='请输入关键词' style={{ width: 200 }} />
          <Select
            defaultValue="下单时间"
            style={{ width: 200 }}
            options={[
              { value: '1', label: '下单时间' },
              { value: '2', label: '报价有效截止期' },
            ]}
          />
          <RangePicker
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
            onChange={(value, dateString) => {
              console.log('Selected Time: ', value);
              console.log('Formatted Selected Time: ', dateString);
            }}
            onOk={onOk}
          />
        </Space>
      </div>
      <Input size="large" placeholder="请输入关键词" style={{ maxWidth: 500, marginLeft: 10, marginTop: 20 }} prefix={<SearchOutlined />} />

      <App />

    </div >
  )
}
